import React, { useEffect } from "react";
import "../visualFilecss/VisualCockpit.css";
import * as echarts from "echarts";
import rem from "../../rem/flexble";
export default function VisualCockpit() {
  useEffect(() => {
    let visitorecharts = echarts.init(document.getElementById("visitor"));

    const data = [];
    for (let i = 0; i < 5; ++i) {
      data.push(Math.round(Math.random() * 200));
    }
    visitorecharts.setOption({
     
      xAxis: {
        max: 'dataMax'
      },
      yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 2 // only the largest 3 bars will be displayed
      },
      series: [
        {
          realtimeSort: true,
          name: 'X',
          type: 'bar',
          data: data,
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        }
      ],
      animationDuration: 0,
      animationDurationUpdate: 3000,
      animationEasing: 'linear',
      animationEasingUpdate: 'linear'
    });
  }, []);

  return (
    <div className="visualCockpit">
      <div id="visitordiv">
        <div id="visitor"  style={{width:"500px",height:"300px"}}></div>
      </div>
    </div>
  );
}